/*index.html*/
.loading-text{
    font-size:0.3rem;color:#5c3b1c;
    top:0.54rem;
    right:0.54rem;
    width:2.08rem;
    height: 2.08rem;
    line-height: 2.08rem;
    text-align: center;
    background: url(../img/icon-loading.gif) no-repeat center/2.08rem;
}
.loading-page-wrap{
    width:100%;
    height: 100%;
    background: url(../img/loading.jpg) no-repeat center/cover;
}
.loading-logo{
    width:3.37rem;
    margin:0.54rem;
}
.loading-box{
    position: absolute;
    bottom:0;
    right:0.24rem;
    width:3.93rem;
}
.loading-video{
    height:100vh;
}
/*main.html*/
.main-view-image-bg{
    width:150vh;
    height: 100vh;
}
.main-view-image{
    width:150vh;
    height: 100vh;
    /*left:0;*/
    /*-webkit-animation:bgImageMove 60s infinite linear;*/
    /*-moz-animation:bgImageMove 60s infinite linear;*/
    /*-o-animation:bgImageMove 60s infinite linear;*/
    /*animation:bgImageMove 60s infinite linear;*/
}
.main-view-image img{

}
.main-view-image.pause{
    animation-play-state: paused;
}
.main-view-image img{
    width:100%;
    height: 100%;
}
@-webkit-keyframes bgImageMove {
    0%{
        -webkit-transform:translateX(0);
    }
    50%{
        -webkit-transform:translateX(-50%);
    }
    100%{
        -webkit-transform:translateX(0);
    }
}
@-o-keyframes bgImageMove {
    0%{
        -o-transform:translateX(0);
    }
    50%{
        -o-transform:translateX(-50%);
    }
    100%{
        -o-transform:translateX(0);
    }
}
@-moz-keyframes bgImageMove {
    0%{
        -moz-transform:translateX(0);
    }
    50%{
        -moz-transform:translateX(-50%);
    }
    100%{
        -moz-transform:translateX(0);
    }
}
@-ms-keyframes bgImageMove {
    0%{
        -ms-transform:translateX(0);
    }
    50%{
        -ms-transform:translateX(-50%);
    }
    100%{
        -ms-transform:translateX(0);
    }
}
@keyframes bgImageMove {
    0%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-50%);
    }
    100%{
        transform:translateX(0);
    }
}
.swiper-slide,.swiper-wrapper,.swiper-container{
    width:100%;
    height: 100%;
}
.swiper-slide{
    overflow: hidden;
}
.swiper-slide-inner{
    position: relative;
    width:100%;height: 100%;overflow: auto;
}
.main-pagination{
    position: absolute;
    bottom:14%;
    left:40%;
}
.swiper-pagination-bullet-active{
    background:#fff;
}
.swiper-pagination-bullet{
    margin-right:0.38rem;

}
.main-bottom-title{
    position: absolute;
    z-index:99;
    bottom:0.8rem;
    width:90%;
    left:5%;
}
.main-location-name{
    color:#fff;
    text-align: center;
    background: rgba(0,0,0,.5);
    padding:0.33rem;
    border-radius: 0.2rem;
    display: flex;
    align-content: center;
    justify-content: center;
}
.main-location-name span{
    display:flex;
    align-items: center;
    font-size:0.55rem;
}
.user-avatar{
    width:1.1rem;
    height:1.1rem;
    margin-right:.2rem;
    border-radius: 50%;
}
.main-btn-change-wrap{
    width:100%;
    z-index:999;
    bottom:20%;
}
.main-btn-change{
    cursor: pointer;
    width:1.95rem;
    height: 1.92rem;
    background: rgba(0,0,0,.5) url(../img/icon-prev.png) no-repeat 0.06rem center/0.5rem;
    font-size: 0.38rem;
    text-align: center;
    padding:0.5rem;
}
.main-btn-next{
    background: rgba(0,0,0,.5) url(../img/icon-next.png) no-repeat right 0.06rem center/0.5rem;

}
.main-gesture-wrap{

}
.dot-line{
    width:7rem;
    margin-left:0.8rem;
}
.icon-gesture{
    width:0.8rem;
    left:3.94rem;
    -webkit-animation: swipeGesture 2s linear infinite;
    -o-animation: swipeGesture 2s linear infinite;
    -moz-animation: swipeGesture 2s linear infinite;
    animation: swipeGesture 2s linear infinite;
}
@-webkit-keyframes swipeGesture {
    0%{
        -webkit-transform:translateX(0);
    }
    25%{
        -webkit-transform:translateX(-100%);
    }
    50%{
        -webkit-transform:translateX(0);
    }
    75%{
        -webkit-transform:translateX(100%);
    }
    100%{
        -webkit-transform:translateX(0);
    }
}
@-moz-keyframes swipeGesture {
    0%{
        -moz-transform:translateX(0);
    }
    25%{
        -moz-transform:translateX(-100%);
    }
    50%{
        -moz-transform:translateX(0);
    }
    75%{
        -moz-transform:translateX(100%);
    }
    100%{
        -moz-transform:translateX(0);
    }
}
@-o-keyframes swipeGesture {
    0%{
        -o-transform:translateX(0);
    }
    25%{
        -o-transform:translateX(-100%);
    }
    50%{
        -o-transform:translateX(0);
    }
    75%{
        -o-transform:translateX(100%);
    }
    100%{
        -o-transform:translateX(0);
    }
}
@-ms-keyframes swipeGesture {
    0%{
        -ms-transform:translateX(0);
    }
    25%{
        -ms-transform:translateX(-100%);
    }
    50%{
        -ms-transform:translateX(0);
    }
    75%{
        -ms-transform:translateX(100%);
    }
    100%{
        -ms-transform:translateX(0);
    }
}
@keyframes swipeGesture {
    0%{
        transform:translateX(0);
    }
    25%{
        transform:translateX(-100%);
    }
    50%{
        transform:translateX(0);
    }
    75%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(0);
    }
}
.main-nav-wrap{
    position: absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height: 4.32rem;
    background: url(../img/nav-bg.png) no-repeat center/contain;
}
.main-nav-box{
    display: block;
    width:1.2rem;
    margin-left:auto;
    margin-right: auto;
}
.main-nav-box3{
    width:1.48rem;
}
.main-nav-text{
    display: block;
    font-size:0.26rem;
    color:#5c3b1c;
    text-align: center;
}
.main-nav-item{
    position: absolute;
    cursor: pointer;
    display: block;
}
.main-nav-item1{
    left:1.3rem;
    top:0.8rem;
}
.main-nav-item2{
    left:3.35rem;
    top:0.5rem;
}
.main-nav-item3{
    top:0.3rem;
}
.main-nav-item4{
    right:3.35rem;
    top:0.5rem;
}
.main-nav-item5{
    right:1.3rem;
    top:0.8rem;
}
.remain-count{
    z-index:11;
    font-size: 0.56rem;
    top:3.16rem;
}
.remain-count-text{
    width:3.53rem;
    vertical-align: middle;

}
.remain-count-num{
    color:#5c3b1c;
    font-weight: bold;
    font-size:1.14rem;
    margin-left:0.64rem;
    vertical-align: middle;
}
.music-box{
    position:absolute;
    top: 4.2rem;
    z-index: 10;
    width: 100%;
    height: .82rem;
}
.music-box .bg-music{
    float:right;
    margin-right:.6rem;
    width:.82rem;
    height:.82rem;
}
.music-box .music-pause{
    background: url("../img/music-play.png")no-repeat center/cover;
    -webkit-animation: rotateInfinity 5s linear infinite;
    animation: rotateInfinity 5s linear infinite;
}
.music-box .music-play{
    background: url("../img/music-pause.png")no-repeat center/cover;
}
.main-link-rules{
    z-index:12;
    font-size: 0.43rem;
    top:0.06rem;
    right:0.1rem;
    color:#5c3b1c;
}
.main-link-rules img{
    width:0.4rem;
    vertical-align: middle;
}
.main-notice-info{
    bottom:0.14rem;
    z-index:99;
    font-size:0.25rem;
    width:90%;
    height: 0.5rem;
    line-height: 0.5rem;
    left:5%;
    background: rgba(0,0,0,.5);
    overflow: hidden;
    white-space: nowrap;
}
.pad_right{ padding-right:2em;}
.main-notice-item{
    background: url(../img/icon-notice.png) no-repeat left center/0.5rem;
    padding-left:0.6rem;
    margin-left:0.75rem;
    margin-right:1.83rem;
}
/*扩散的点*/
@-webkit-keyframes warn {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}
@-moz-keyframes warn {
    0% {
        transform: scale(0.3);
        -moz-transform: scale(0.3);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.3);
        -moz-transform: scale(0.3);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.5);
        -moz-transform: scale(0.5);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.8);
        -moz-transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        -moz-transform: scale(1);
        opacity: 0.0;
    }
}
@-ms-keyframes warn1 {
    0% {
        transform: scale(0.3);
        -ms-transform: scale(0.3);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.3);
        -ms-transform: scale(0.3);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.3);
        -ms-transform: scale(0.3);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.5);
        -ms-transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.8);
        -ms-transform: scale(0.8);
        opacity: 0.0;
    }
}
@-o-keyframes warn1 {
    0% {
        transform: scale(0.3);
        -o-transform: scale(0.3);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.3);
        -o-transform: scale(0.3);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.3);
        -o-transform: scale(0.3);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.5);
        -o-transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.8);
        -o-transform: scale(0.8);
        opacity: 0.0;
    }
}
@keyframes warn1 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.0;
    }
}

@-webkit-keyframes rotateInfinity {
    from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@keyframes rotateInfinity{from{transform: rotate(0deg)}
    from{-webkit-transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

.dot-container {
    position: absolute;
    width: 1.2rem;
    height:1.2rem;
    z-index:999;
    cursor: pointer;
    top:100px;
    left:200px;
}
.dot-container-inner{
    width:100%;
    height: 100%;
}
/* 保持大小不变的小圆点 */
.dot {
    width: 0.2rem;
    height: 0.2rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #e6ba70;
    border-radius: 50%;
    background-color:#e6ba70; /* 实心圆 ，如果没有这个就是一个小圆圈 */
}
.dot-circle{
    background:#e6ba70;
    width:100%;
    height: 100%;
    border: 1px solid #e6ba70;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -o-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

